

<template>
  <div class="food-route-planning">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">
        <div class="timer">
          <div class="input-tip-title">
            <div class="tip">
              <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
            </div>
            <div class="title">关于景点讲解,您还需要明确具体内容:</div>
          </div>
          <div class="category-list">
            <el-form label-width="70" style="margin-left: 8px;margin-bottom: 10px;" :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="历史文旅" style="margin-bottom: 10px">
                <el-select clearable :disabled="TravelHobbyList[0].isShow"
                           v-model="formInline.travelInterestHistory" placeholder="请选择"
                            @clear="clearHistory"
                           @change="changeHistory(TravelHobbyList[0],TravelHobbyList[0].informationNames,formInline.travelInterestHistory)">
                  <el-option
                      v-for="(item,index) in TravelHobbyList[0].informationNames"
                      :key="index"
                      :label="item.landmarkName"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="民俗文旅" style="margin-bottom: 10px">
                <el-select clearable :disabled="TravelHobbyList[1].isShow"
                           v-model="formInline.travelInterestFolkways" placeholder="请选择"
                            @clear="clearHistory"
                           @change="changeHistory(TravelHobbyList[1],TravelHobbyList[1].informationNames,formInline.travelInterestFolkways)">
                  <el-option
                      v-for="(item,index) in TravelHobbyList[1].informationNames"
                      :key="index"
                      :label="item.landmarkName"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="名人文旅" style="margin-bottom: 10px">
                <el-select clearable :disabled="TravelHobbyList[2].isShow"
                           v-model="formInline.travelInterestCelebrity" placeholder="请选择"
                            @clear="clearHistory"
                           @change="changeHistory(TravelHobbyList[2],TravelHobbyList[2].informationNames,formInline.travelInterestCelebrity)">
                  <el-option
                      v-for="(item,index) in TravelHobbyList[2].informationNames"
                      :key="index"
                      :label="item.landmarkName"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="红色文旅">
                <el-select clearable :disabled="TravelHobbyList[3].isShow"
                           v-model="formInline.travelInterestRed" placeholder="请选择"
                            @clear="clearHistory"
                           @change="changeHistory(TravelHobbyList[3],TravelHobbyList[3].informationNames,formInline.travelInterestRed)">
                  <el-option
                      v-for="(item,index) in TravelHobbyList[3].informationNames"
                      :key="index"
                      :label="item.landmarkName"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="美食文旅">
                <el-select clearable :disabled="TravelHobbyList[4].isShow"
                           v-model="formInline.travelInterestGourmet" placeholder="请选择"
                            @clear="clearHistory"
                           @change="changeHistory(TravelHobbyList[4],TravelHobbyList[4].informationNames,formInline.travelInterestGourmet)">
                  <el-option
                      v-for="(item,index) in TravelHobbyList[4].informationNames"
                      :key="index"
                      :label="item.landmarkName"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="网红文旅">
                <el-select clearable :disabled="TravelHobbyList[5].isShow"
                           v-model="formInline.travelInterestInfluencer" placeholder="请选择"
                            @clear="clearHistory"
                           @change="changeHistory(TravelHobbyList[5],TravelHobbyList[5].informationNames,formInline.travelInterestInfluencer)">
                  <el-option
                      v-for="(item,index) in TravelHobbyList[5].informationNames"
                      :key="index"
                      :label="item.landmarkName"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>

      </div>


    </div>

  </div>
  <div class="input-bottom-dialogue" v-if="isNavigationShow">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">

        <div class="timer">
          <div class="input-tip-title entourage-list">
            <div style="display: flex;align-items:  center; ">
              <div class="tip">
                <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
              </div>
              <div class="title">关于晋祠AR景区导航,您还需要明确具体内容:</div>
            </div>
          </div>
          <div class="category-list">
            <div @click="navigationClick(item,index)"
                 :class="Number(currentNavigation)===index?'active-category-list-item':'category-list-item'"
                 v-for="(item,index) in navigationList">
              <div class="category-list-item-title">
                {{item.placeName}}
              </div>
            </div>
          </div>
        </div>

      </div>


    </div>

  </div>
  <div class="culture-bottom-dialogue" v-if="currentNavigation>-1">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">
        <div class="culture-ai-title">
          <div class="tip">
            <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
          </div>
          <div class="title">总体介绍</div>
        </div>
        <div class="culture-AI">
          <div class="culture-left">
            <div>
              <div class="culture-container-title">文字介绍</div>
              <div class="culture-container">
                {{cultureIntroduction}}
              </div>
            </div>
          </div>
          <div class="culture-right">
            <div>
              <div class="culture-container-title">视频介绍</div>
              <div class="culture-container-video">
                <div @click="playAudio" id="audio-player">

                  <img style="width: 100px;height: 100px" src="@/assets/images/notLoggedIn/play@2x.png">
                </div>
                <div>
                  <audio  id="audio">

                  </audio>

                </div>
              </div>
            </div>
          </div>

        </div>

      </div>


    </div>

  </div>
</template>
<script setup>

import IntelligentlyGeneratedAI from "@/views/home/components/PreTripPlanning/IntelligentlyGeneratedAI.vue";
import {reactive, ref} from "vue";
import api from "@/service/TouristHomepage";
import {useTouristHomepageStore} from "@/store/touristHomepage";
const props=defineProps({
  clearStatus: {
    type: Boolean,
    default: () => {
      return false
    }
  }
})
let formInline=reactive({
  travelInterestHistory: '',
  travelInterestFolkways:'',
  travelInterestCelebrity:'',
  travelInterestRed:'',
  travelInterestGourmet:'',
  travelInterestInfluencer:''
})
const currentNavigation=ref(-1);
const navigationList=ref([
    {
      placeName:'总体介绍',
      placeId:'0'
    }
])

function navigationClick(data,index){
  currentNavigation.value=Number(index);
  getSightInfoBySightApi()
}
// 根据景点名称以及具体景点查询景点信息
function attractionNavigationDetails(){
  let prams={
    landmarkId:currentNavigationLabel.value,
    navigationType:'1'
  }
  navigationList.value=[
    {
      placeName:'总体介绍',
      placeId:'0'
    }
  ]
  api.getAttractionNavigationList(prams).then(res=>{
    navigationList.value.push(
      ...res.data
    )
  })
}
const TravelHobbyList=ref([
  {
    categoryName: '历史文旅',
    id: '1',
    value:'',
    isShow:false,
  },
  {
    categoryName: '民俗文旅',
    id: '2',
    value:'',
    isShow:false,
  },
  {
    categoryName: '名人文旅',
    id: '3',
    value:'',
    isShow:false,
  },
  {
    categoryName: '红色文旅',
    id: '4',
    value:'',
    isShow:false,
  },
  {
    categoryName: '美食文旅',
    id: '5',
    value:'',
    isShow:false,
  },
  {
    categoryName: '网红文旅',
    id: '6',
    value:'',
    isShow:false,
  }
])
// 计算属性
const cityCode=computed(()=>{
  if(useTouristHomepageStore().setTouristCityInfo){
    return useTouristHomepageStore().setTouristCityInfo.cityCode;
  }
})
// 请求旅游信息-文化旅游一级分类类别列表数据
function getCategoryListApi(data){
  api.getCategoryList(data).then((res) => {

    TravelHobbyList.value.forEach(item=>{
      res.data.forEach(item1=>{
        if(Number(item.id)===Number(item1.id)){
          item.informationNames=item1.informationNames;
          item.categoryCode=item1.categoryCode;
          item.divisionName=item1.divisionName;
          item.divisionCode=item1.divisionCode;
        }
      })
    })

  });
}
const isNavigationShow=ref(false);
// 当前点击的景点
const currentNavigationLabel=ref('');
function clearHistory(){
  TravelHobbyList.value.forEach((item,index)=>{
    item.isShow=false;
  })
  currentNavigation.value=-1;
  isNavigationShow.value=false;
  navigationList.value=[];
  formInline.travelInterestHistory='';
  formInline.travelInterestFolkways='';
  formInline.travelInterestCelebrity='';
  formInline.travelInterestRed='';
  formInline.travelInterestGourmet='';
  formInline.travelInterestInfluencer='';

}
const selectCulturePlace=ref('');
function changeHistory(obj,arr,data){
  if(data){
    TravelHobbyList.value.forEach((item,index)=>{
      if(Number(item.id)!==Number(obj.id)){
        item.isShow=true;
      }
    })

    isNavigationShow.value=true;
    currentNavigationLabel.value=JSON.parse(JSON.stringify(data))
    // 转化记录目前data的景点中文
    arr.forEach(item=>{
      if(Number(item.id)===Number(data)){
        selectCulturePlace.value=item.landmarkName
      }
    })

    attractionNavigationDetails()
    useTouristHomepageStore().setTouristClearStatus(false)
  }

}
const cultureIntroduction=ref('')
function getSightInfoBySightApi(){
  let prams={
    place:'',
  }
  if(Number(currentNavigation.value)===0){
    prams.place=selectCulturePlace.value;
  }else {
    prams.place=selectCulturePlace.value;
    prams.landmark=navigationList.value[currentNavigation.value].placeName;
  }
  api.getSightInfoBySight(prams).then(res=>{
    cultureIntroduction.value=res.data.answer;
  })

}
watch(() => useTouristHomepageStore().touristClearStatus, () => {
  if(useTouristHomepageStore().touristClearStatus){
    isNavigationShow.value=false;
    currentNavigation.value=-1;
    clearHistory()

  }
})
onMounted(() => {
  getCategoryListApi({divisionCode:cityCode.value})
})
</script>
<style scoped lang="scss">
@import "@/assets/main.scss";
.food-route-planning{
  display: flex;
  margin-bottom: 20px;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 146px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .timer{
        border-bottom: 1px solid #EBD7C5;
        .entourage-list{
          justify-content: space-between;
          width:100%;
        }
        .input-tip-title{
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .title{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .category-list{
          display: flex;

          //  换行
          flex-wrap: wrap;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;


        }
      }

    }

  }
}
//旅游路线规划
.input-bottom-dialogue{
  display: flex;
  margin: 20px 0;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 106px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .timer{
        border-bottom: 1px solid #EBD7C5;
        .entourage-list{
          justify-content: space-between;
          width:100%;
        }
        .input-tip-title{
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .title{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .category-list{
          display: flex;
          margin-top: 16px;
          //  换行
          flex-wrap: wrap;
          margin-bottom: 10px;
          .category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #F5ECE2;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }
          .active-category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #9B6548;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }


        }
      }
      .culture-ai-title{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .title{
          width: 68px;
          height: 16px;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .culture-AI{
        height: 210px;
        display: flex;
        .culture-left{
          width: 100%;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
          }
          .culture-container{
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: auto;
          }
        }
        .culture-right{
          margin-left: 40px;
          width: 100%;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
          }
          .culture-container-video{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: auto;
          }
        }
      }

    }

  }
}
//  旅游路线规划
.specifics{
  margin-top: 20px;
}
//文化介绍模块
.culture-bottom-dialogue{
  display: flex;
  margin: 20px 0;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 286px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .timer{
        border-bottom: 1px solid #EBD7C5;
        .entourage-list{
          justify-content: space-between;
          width:100%;
        }
        .input-tip-title{
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .title{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .category-list{
          display: flex;
          margin-top: 16px;
          //  换行
          flex-wrap: wrap;
          margin-bottom: 10px;
          .category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #F5ECE2;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }
          .active-category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #9B6548;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }


        }
      }
      .culture-ai-title{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .title{
          width: 68px;
          height: 16px;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .culture-AI{
        height: 210px;
        display: flex;
        .culture-left{
          width: 100%;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
          }
          .culture-container{
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: auto;
          }
        }
        .culture-right{
          margin-left: 40px;
          width: 100%;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
          }
          .culture-container-video{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: auto;
          }
        }
      }

    }

  }
}
</style>
<style>
@import "@/assets/main.scss";
</style>